import React, { useState, useEffect } from 'react'
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Home1 from "@/assets/images/tabbar/home_1.png"//彩色
import Home2 from "@/assets/images/tabbar/home_2.png"//黑色
import My1 from "@/assets/images/tabbar/my_1.png"
import My2 from "@/assets/images/tabbar/my_2.png"
import Fast from "@/assets/images/tabbar/fast.png"
import "./Tabber.less"
import { useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
export default function Tabber() {
    let navigate = useNavigate()
    let [value, setValue] = useState(0)
    //辅助数组
    const routers = ["/home", "/fast", "/user"]
    const location = useLocation()
    useEffect(() => {
        // console.log(location.pathname);
        setValue(routers.indexOf(location.pathname))
        //数组.indexOf("字符串") 获取一个字符串在数组中的索引，如果不存在返回-1
    }, [location.pathname])

    return (
        <div className='tabber' style={{ display: value >= 0 ? "block" : "none" }}>
            <BottomNavigation
                showLabels
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                    navigate(routers[newValue])
                }}
            >
                <BottomNavigationAction label="首页" icon={<img src={value === 0 ? Home1 : Home2} />} />
                <BottomNavigationAction label="快速刷题" icon={<img src={Fast} />} />
                <BottomNavigationAction label="我的" icon={<img src={value === 2 ? My1 : My2} />} />
            </BottomNavigation>
        </div>
    )
}
